<template>
	<div class="screen2-module-center-content" ref="content">
		<div class="chart-box" ref="chart"></div>
	</div>
</template>

<script setup>
import { ref, onBeforeUnmount, toRefs, getCurrentInstance, onMounted } from 'vue';
import * as echarts from 'echarts';
import { mapChinaJson, eleResize } from '@/assets/js/utils'
import geoCoordMap from './cities.json'

const mapColor = '#00ffff'
const instance = getCurrentInstance()
const defaultOption = {
	tooltip: {
		show: false,
	},
	geo: {
		map: 'china',
		label: {
			show: true,
			position: 'insideLeft',
			color: 'white',
			fontSize: '10',
			emphasis: {
				show: true
			}
		},
		roam: false,
		silent: true,
		itemStyle: {
			normal: {
				areaColor: 'transparent',
				borderColor: mapColor,
				shadowBlur: 10,
				shadowColor: mapColor
			}
		}
	},
	series: []
}

echarts.registerMap('china', { geoJSON: mapChinaJson });

let $frame = null;
let $dom = null;
let myChart = null;

const mapType = ref(2)  //1、派件  2、寄件
const mapData = ref([
	{
		'name': "天津市",
		'value': 178546
	}, 
	{
		'name': "湖南省",
		'value': 125687
	}, 
	{
		'name': "福建省",
		'value': 78452
	},
	{
		'name': "北京市",
		'value': 57841
	},
	{
		'name': "江苏省",
		'value': 45879
	}, 
	{
		'name': "海南",
		'value': 28584
	}, 
	{
		'name': "四川省",
		'value': 14852
	}, 
	{
		'name': "浙江省",
		'value': 12589
	}, 
	{
		'name': "重庆市",
		'value': 5261
	},
	{
		'name': "香港特别行政区",
		'value': 2563
	}, 
	{
		'name': "内蒙古",
		'value': 856
	}
])

const formtGCData = function(geoData, data, srcNam, dest){
	let tGeoDt = [];
	if (dest) {
		for (let i = 0, len = data.length; i < len; i++) {
			if (srcNam != data[i].name) {
				tGeoDt.push({
					coords: [geoData[srcNam], geoData[data[i].name]]
				});
			}
		}
	} else {
		for (let i = 0, len = data.length; i < len; i++) {
			if (srcNam != data[i].name) {
				tGeoDt.push({
					coords: [geoData[data[i].name], geoData[srcNam]]
				});
			}
		}
	}
	return tGeoDt;
}

const formtVData = function(geoData, data, srcNam){
	let tGeoDt = [];
	for (let i = 0, len = data.length; i < len; i++) {
		let tNam = data[i].name
		if (srcNam != tNam) {
			tGeoDt.push({
				name: tNam,
				symbolSize: 2,
				itemStyle: {
					normal: {
						color: '#ffeb40',
					}
				},
				value: geoData[tNam]
			});
		}
	}
	tGeoDt.push({
		name: srcNam,
		value: geoData[srcNam],
		symbolSize: 5,
		itemStyle: {
			normal: {
				color: '#2ef358',
			}
		}
	});
	return tGeoDt;
}

const createChart = function(){
	if (!$dom) {
		$dom = instance.refs.chart;
		myChart = echarts.init($dom)
	}
}

const drawChart = function(){
	let opt = JSON.parse(JSON.stringify(defaultOption))
	
	let s_data = [];
	if (mapType.value===2) {
		s_data.push({
			type: 'lines',
			zlevel: 2,
			mapType: 'china',
			symbol: 'none',
			label:{
				show:false
			},
			effect: {
				show: true,
				period: 1.5,
				trailLength: 0.1,
				color: '#2ef358',
				symbol: 'pin',
				symbolSize: 6,
				trailLength: 0.5
			},
			lineStyle: {
				normal: {
					color: '#2ef358',
					width: 1,
					opacity: 0.4,
					curveness: 0.2
				}
			},
			data: formtGCData(geoCoordMap, mapData.value, '上海市', true)
		})
	} else {
		s_data.push(
			{
				type: 'lines',
				zlevel: 2,
				effect: {
					show: true,
					period: 1.5,
					trailLength: 0.1,
					color: '#ffeb40',
					symbol: 'pin',
					symbolSize: 6,
					trailLength: 0.5
				},
				lineStyle: {
					normal: {
						color: '#ffeb40',
						width: 1,
						opacity: 0.4,
						curveness: 0.2
					}
				},
				data: formtGCData(geoCoordMap,  mapData.value, '上海市', false)
			},
			{
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: {
					period: 4,
					scale: 2.5,
					brushType: 'stroke'
				},
				symbol: 'none',
				symbolSize: 4,
				itemStyle: {
					normal: {
						color: '#fff'
					}
				},
				data: formtVData(geoCoordMap, mapData.value, '珠海')
			}
		)
	}
	
	if (s_data.length<=0) return false;
	opt.series = s_data;
	destoryChart()
	createChart()
	myChart.setOption(opt)
}

const destoryChart = function(){
	try{
		myChart.dispose();
		$dom.innerHTML = '';
		myChart = null;
		$dom = null;
	}catch(e){
		//TODO handle the exception
	}
}

/* 创建div宽高变化监听器 */
const createEleResize = function(){
	$frame = instance.refs.content;
	eleResize.on($frame, drawChart);
}

/* div宽高变化事件移除 */
const destroyEleResize=function(){
	try{
		eleResize.off($frame, drawChart);
		$frame = null
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	createEleResize()
})

onBeforeUnmount(()=>{
	destroyEleResize()
	destoryChart()
})

defineExpose({drawChart})
</script>

<style scoped lang="scss">
.screen2-module-center-content{
	height: 100%;
	.chart-box{
		height: 100%;
	}
}
</style>